<template>
	<view class="editorRecord">
		<view class="tag-box">
			<text>记录我的</text>
			<view>{{Hid}}</view>
			<text style="padding-left: 25rpx;">ing...</text>
		</view>
		<textarea
			placeholder="说点什么呀..."
			placeholder-style="color: #C0C4CC;font-size: 32rpx;"
			v-model="Content"></textarea>
		<view class="files-button">
			<view @click="clickEmoji">
				<text
					:style="emoji?'color:#F56C6C;':''"
					class="iconfont icon-smile"></text>
			</view>
			<view
				@click="clickFileImage"
				v-if="editorConfig&&editorConfig.editor.toolbar.image.status">
				<text class="iconfont icon-xiangji"></text>
			</view>
			<view
				@click="clickVideo"
				v-if="editorConfig&&editorConfig.editor.toolbar.video.status">
				<text class="iconfont icon-zhibo"></text>
			</view>
			<view
				@click="clickFileAudio"
				v-if="editorConfig&&editorConfig.editor.toolbar.audio.status">
				<text class="iconfont icon-yuyin"></text>
			</view>
			<view
				v-if="editorConfig && editorConfig.editor.features.location.status"
				@click="clickMap">
				<text class="iconfont icon-dingwei"></text>
			</view>
		</view>
		<view class="emoji" v-if="emoji">
			<scroll-view scroll-y="true" v-if="listEmoji.length">
				<text
					@click="clickEmojiItem(item)"
					v-for="item in listEmoji">
					{{item}}
				</text>
			</scroll-view>
			<template v-else>
				<public-loading></public-loading>
			</template>
		</view>
		<view class="files-image" v-if="draftDetails">
			<template v-if="draftDetails.files.images.length">
				<view
					class="for"
					@click="$_picturePreview(index,draftDetails.files.images)"
					v-for="(item,index) in draftDetails.files.images">
					<view><image :src="item.imageBigUrl" mode="widthFix"></image></view>
					<text class="iconfont icon-close" @click.stop="clickDeleteAttachment(item.fid)"></text>
				</view>
			</template>
			<template v-if="draftDetails.files.videos.length">
				<view
					@click="$_To('public/video?url='+item.videoUrl)"
					v-for="(item,index) in draftDetails.files.videos"
					class="for">
					<text class="iconfont icon-play"></text>
					<text class="iconfont icon-close" @click.stop="clickDeleteAttachment(item.fid)"></text>
				</view>
			</template>
		</view>
		<view class="files-audio" v-if="draftDetails&&draftDetails.files.audios.length">
			<template v-for="item in draftDetails.files.audios">
				<view @longpress="clickDeleteAttachment(item.fid)">
					<public-audio
						Css="width:337.5rpx;margin:25rpx 0 0 25rpx;"
						:Url="item.audioUrl"></public-audio>
				</view>
			</template>
		</view>
		<view class="map" v-if="mapName" @longpress="longpressDeleteMap">
			<text class="iconfont icon-map-filling"></text>
			<text class="text">{{mapName}}</text>
		</view>
		<view class="reminder-information">提示：没有删除按钮的，长按删除</view>
		<view class="button" @click="clickPublish">打卡</view>
		<view
			@click="clickFileAudio"
			class="position-audio"
			v-if="audioBox">
			<view class="box">
				<text class="iconfont icon-shibai"></text>
				<view
					class="audio-button"
					@click.stop="soundRecording">
					{{audioText == '单击录制音频'?'单击录制音频':audioText+'秒'}}
					</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				Content:"",
				Gid:"",
				Hid:"",
				editorConfig:null,//编辑器配置详情
				draftDetails:null,//草稿详情
				emoji:false,
				listEmoji:[],
				audioBox:false,
				audioText:"单击录制音频",
				soundRecordingState:false,
				mapName:""
			}
		},
		onLoad(e) {
			this.Gid = e.gid;
			this.Hid = e.hid;
			this.Content = e.defaultContent;
			this.getEditorConfig();
		},
		methods: {
			// 获取编辑器配置
			getEditorConfig(){
				this.$_Request(
					"GET","/api/v2/editor/post/config",{},
					(res) => {
						this.editorConfig = res.data.data;
						this.postEditorCreate();
					}
				)
			},
			// 创建草稿
			postEditorCreate(){
				this.$_Request(
					"POST","/api/v2/editor/post/create",
					{
						"createType":2,
						"postGid":this.Gid,
					},
					(res) => {
						if(res.data.code == 0){
							this.draftId = res.data.data.detail.id;
						}else{
							uni.showToast({
								title:res.data.message,
								icon:"none",
								duration:1000
							});
						}
					}
				)
			},
			// 更新草稿
			putUpdateDraft(type,fid){
				// 判断话题标签单双#
				if(this.editorConfig.editor.toolbar.hashtag.showMode == 1){
					this.Hids = ` #${this.Hid} `;
				}else{
					this.Hids = ` #${this.Hid}# `;
				}
				if(!this.mapAddress){
					this.dataMap = {};
				}else{
					this.dataMap = {
						"mapId":4,
						"latitude": this.mapLatitude,
						"longitude": this.mapLongitude,
						"poi":this.mapName,
						"poiId":'',
						"address":this.mapAddress
					}
				}
				this.$_Request(
					"PUT","/api/v2/editor/post/" + this.draftId,
					{
						"content":this.Content + this.Hids, // 正文内容
						"map":this.dataMap,
						"deleteFile":fid?fid:"", // 删除附件
					},
					(res) => {
						uni.hideLoading();
						if(res.data.code == 0){
							// 重新获取草稿详情
							this.getObtainDraftDetails();
						}else{
							uni.showToast({
								title:res.data.message,
								icon:"none",
								duration:1000
							});
						}
						// 直接发布
						if(type == 'publishing'){
							if(res.data.code == 0){
								// 直接发布
								this.postPublish()
							}else{
								uni.showToast({
									title:res.data.message,
									icon:"none",
									duration:1000
								});
							}
						}
					}
				)
			},
			// 直接发布
			postPublish(){
				this.$_Request(
					"POST","/api/v2/editor/post/" + this.draftId,{},
					(res) => {
						if(res.data.code == 0){
							uni.$emit('listRecord',{msg:'listRecord'})
							uni.navigateBack();
						}else{
							uni.showToast({
								title:res.data.message,
								icon:"none",
								duration:1000
							});
						}
					}
				)
			},
			// 获取草稿详情
			getObtainDraftDetails(){
				this.$_Request(
					"GET","/api/v2/editor/post/" + this.draftId,{},
					(res) =>{
						this.draftDetails = res.data.data.detail;
					}
				)
			},
			// 打卡按钮
			clickPublish(){
				uni.showLoading();
				this.putUpdateDraft('publishing')
			},
			// 点击表情按钮
			clickEmoji(){
				this.emoji = !this.emoji;
				if(this.emoji){
					uni.request({
						url:this.$_Config() + "Config.json",
						success: (res) => {
							this.listEmoji = res.data.allEmoji;
						}
					})
				}
			},
			// 选中表情
			clickEmojiItem(item){
				this.Content += item;
				this.emoji = !this.emoji;
			},
			// 点击图片按钮
			clickFileImage(){
				let number = this.editorConfig.editor.toolbar.image.uploadNumber;
				uni.chooseImage({
					count:parseInt(number) ? parseInt(number) : 1,
					success: (res) => {
						this.UploadImage(res.tempFiles)
					}
				})
			},
			// 上传图片
			UploadImage(params){
				uni.showLoading({ title: "上传中" });
				return new Promise((presolve, preject) => {
					let uploads = [];
					(params).forEach((item, i) => {
						uploads[i] = new Promise((resolve) => {
							uni.uploadFile({
								url: this.$_Url() + "/api/v2/common/upload-file",
								filePath: item.path,
								name: "file",
								header: this.$_FresnsHeader(),
								formData:{
									"usageType":1,
									"tableName":"post_logs",
									"tableColumn":"id",
									"type":"image",
									"uploadMode":"file",
									"tableId":this.draftId
								},
								success(res) {
									if(JSON.parse(res.data).code == 0){
										resolve()
									}else{
										uni.hideLoading();
										resolve()
									}
								},
								fail(err) {
									
								}
							})
						})
					})
					Promise.all(uploads).then(res => {
						//图片上传完成
						presolve(res)
						uni.hideLoading();
						this.getObtainDraftDetails();
					}).catch(err => {
						preject(err)
						uni.showToast({
							title: '上传失败请重试',
							icon: 'none'
						})
					})
				})
			},
			// 点击，删除图片
			clickDeleteAttachment(fid){
				uni.showModal({
					title: "提示",
					content: "是否要删除本附件？",
					success: (res) => {
						if(res.confirm) {
							uni.showLoading();
							this.putUpdateDraft('deleteFile',fid)
						}
					}
				});
			},
			// 点击视频按钮
			clickVideo(){
				uni.chooseVideo({
					maxDuration:parseInt(this.editorConfig.editor.toolbar.video.maxTime),
					success: (res) => {
						this.UploadVideo(res.tempFilePath)
					}
				})
			},
			// 上传视频
			UploadVideo(video){
				let _this = this;
				uni.showLoading();
				uni.uploadFile({
					url: _this.$_Url() + "/api/v2/common/upload-file",
					filePath: video,
					name: "file",
					header: _this.$_FresnsHeader(),
					formData:{
						"usageType":1,
						"tableName":"post_logs",
						"tableColumn":"id",
						"type":"video",
						"tableKey":"",
						"uploadMode":"file",
						"tableId":_this.draftId
					},
					success(res) {
						uni.hideLoading();
						if(JSON.parse(res.data).code == 0){
							_this.getObtainDraftDetails();
							_this.textareaFocus = true;
							uni.hideLoading();
						}else{
							uni.showToast({
								title: JSON.parse(res.data).message,
								icon: "none",
								duration: 1000
							});
						}
					}
				})
			},
			// 点击，音频，按钮
			clickFileAudio(){
				if(this.soundRecordingState){
					this.soundRecording()
				}else{
					this.audioBox = !this.audioBox;
				}
			},
			// 录音操作
			soundRecording(){
				this.soundRecordingState = !this.soundRecordingState;
				if(this.soundRecordingState){
					uni.getRecorderManager().start();
					this.audioText = 1;
					this.timer = setInterval(() => {
						this.audioText += 1;
						if(this.audioText == 59){
							this.audioText = "单击录制音频";
							this.soundRecordingState = false;
							clearInterval(this.timer)
							uni.getRecorderManager().stop();
							uni.getRecorderManager().onStop((res) => {
								this.UploadAudio(res.tempFilePath)
							});
						}
					}, 1000);
				}else{
					this.audioText = "单击录制音频";
					this.soundRecordingState = false;
					clearInterval(this.timer)
					uni.getRecorderManager().stop();
					uni.getRecorderManager().onStop((res) => {
						this.UploadAudio(res.tempFilePath)
					});
				}
			},
			// 上传音频
			UploadAudio(audio){
				let _this = this;
				uni.showLoading();
				uni.uploadFile({
					url: _this.$_Url() + "/api/v2/common/upload-file",
					filePath: audio,
					name: "file",
					header: _this.$_FresnsHeader(),
					formData:{
						"usageType":1,
						"tableName":"post_logs",
						"tableColumn":"id",
						"type":"audio",
						"tableKey":"",
						"uploadMode":"file",
						"tableId":_this.draftId
					},
					success(res) {
						uni.hideLoading();
						if(JSON.parse(res.data).code == 0){
							_this.audioText = "单击录制音频";
							_this.soundRecordingState = false;
							_this.textareaFocus = true;
							_this.getObtainDraftDetails();
							_this.audioText = "单击录制音频";
							_this.audioBox = false;
							_this.textareaFocus = true;
							uni.hideLoading();
						}else{
							uni.showToast({
								title: JSON.parse(res.data).message,
								icon: "none",
								duration: 1000
							});
						}
					}
				})
			},
			// 选择位置按钮
			clickMap(){
				uni.chooseLocation({
					success: (res) => {
						this.mapLatitude = res.latitude;
						this.mapLongitude = res.longitude;
						this.mapName = res.name;
						this.mapAddress = res.address;
					}
				});
			},
			// 删除位置
			longpressDeleteMap(){
				this.dataMap = {};
				this.mapLatitude = "";
				this.mapLongitude = "";
				this.mapName = "";
				this.mapAddress = "";
			},
		}
	}
</script>

<style lang="scss">
.editorRecord{
	.position-audio{
		width: 100%;
		height: 100vh;
		background-color:rgba(0,0,0,0.7);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		display: flex;
		align-items: center;
		justify-content: center;
		.box{
			width: 300rpx;
			height: 300rpx;
			position: relative;
			.audio-button{
				width: 300rpx;
				height: 300rpx;
				background: $LanSe;
				color: #FFF;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 100%;
			}
			.icon-shibai{
				position: absolute;
				top: 0;
				right: 0;
				font-size: 50rpx;
				line-height: 50rpx;
				color: #FFF;
			}
		}
	}
	.tag-box{
		display: flex;
		align-items: center;
		margin: 0 25rpx;
		border-bottom: 1rpx solid $BianKuangSe;
		padding-bottom: 25rpx;
		text{
			display: block;
			border: 1rpx solid #FFF;
			margin: 25rpx 0 0 0;
			font-size: 32rpx;
			line-height: 32rpx;
			color: $ZhanWeiSe;
		}
		view{
			display: block;
			border: 1rpx solid #FFF;
			margin: 25rpx 0 0 0;
			font-size: 32rpx;
			line-height: 32rpx;
			color: $YuanSe;
			padding-left: 25rpx;
			font-weight: bold;
		}
	}
	textarea{
		width:calc(100% - 104rpx);
		height: 80rpx;
		display: block;
		font-size: 32rpx;
		background: $BeiJingSe;
		border: 1rpx solid $BianKuangSe;
		margin: 25rpx 25rpx 0 25rpx;
		padding: 25rpx;
	}
	.files-button{
		display: flex;
		align-items: center;
		justify-content: center;
		padding-top: 25rpx;
		view{
			background: $BeiJingSe;
			margin: 0 12.5rpx;
			padding: 15rpx 25rpx;
			line-height: 40rpx;
			display: flex;
			align-items: center;
			border-radius: 5rpx;
			text{
				font-size: 40rpx;
				line-height: 40rpx;
			}
		}
	}
	.emoji{
		scroll-view{
			width: 670rpx;
			height: 300rpx;
			margin: 25rpx 25rpx 0 25rpx;
			box-shadow: 0 0 2rpx $ChangGuiSe;
			padding: 15rpx;
			text{
				font-size: 60rpx;
				line-height: 60rpx;
			}
		}
	}
	.files-image{
		display: flex;
		flex-wrap: wrap;
		.for{
			background: $BeiJingSe;
			width: 216.666666rpx;
			height: 120rpx;
			margin: 25rpx 0 0 25rpx;
			border-radius: 5rpx;
			overflow: hidden;
			position: relative;
			box-shadow: 0 0 1rpx $ChangGuiSe;
			view{
				width: 216.666666rpx;
				height: 120rpx;
				overflow: hidden;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 1;
			}
			.icon-close{
				position: absolute;
				top: 10rpx;
				right: 10rpx;
				text-shadow: 0 0 1rpx #000;
				z-index: 2;
				font-size: 35rpx;
				line-height: 35rpx;
				color: #FFF;
			}
			.icon-play{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 216.666666rpx;
				height: 120rpx;
				font-size: 60rpx;
				line-height: 60rpx;
				background: #999;
				color: #FFF;
			}
		}
	}
	.files-audio{
		display: flex;
		flex-wrap: wrap;
	}
	.map{
		margin: 25rpx 25rpx 0 25rpx;
		display: flex;
		align-items: center;
		background: $BeiJingSe;
		border: 1rpx solid $BianKuangSe;
		border-radius: 5rpx;
		padding: 20rpx 25rpx;
		.iconfont{
			flex-shrink: 0;
			font-size: 40rpx;
			padding-right: 10rpx;
			color: $HongSe;
		}
		.text{
			flex: 1;
			display: -webkit-box;
			/*!autoprefixer:off*/
			-webkit-box-orient: vertical;
			/*autoprefixer:on*/
			-webkit-line-clamp: 1;
			overflow: hidden;
		}
	}
	.reminder-information{
		font-size: 22rpx;
		line-height: 22rpx;
		text-align: center;
		margin-top: 25rpx;
	}
	.button{
		width: 130rpx;
		height: 130rpx;
		background: $HuangSe;
		color: $YuanSe;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 100%;
		margin: 25rpx auto;
		font-size: 32rpx;
		line-height: 32rpx;
	}
}
</style>
